import React, { memo, useEffect, useState } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { getMusicComment } from '../../netWork/player';
import { getCount, getSizeImage } from '../../tools/data_format';
import Comments from '../comment';
import { changeRefreshAction, getLyricAction, getSongDetailAction } from './store/actionCreators';
import { PlayerLeft, PlayerRight, PlayerWrapper } from './style';

const Player = memo((props) => {
  const [ isUnfold, setIsUnfold ] = useState(false)
  const [ musicComment, setMusicComment ] = useState({})
  // Hooks
  const dispatch = useDispatch()
  const { lyricList=[{time:0,content:"加载中"}], currentSong } = useSelector(state=>{
    return{
      lyricList:state.getIn(["player","lyricList"]),
      currentSong:state.getIn(["player","currentSong"]),
    }
  },shallowEqual)

  const  data = (props.location.state && props.location.state.songData) || currentSong
  console.log(data);
  useEffect(()=>{
    dispatch(getLyricAction(data.id))
  },[props])
  useEffect(()=>{
    getMusicComment(data.id,10).then(res=>{
      setMusicComment(res)
    })
  },[data.id])
  // function

  const isShow =()=>{
    setIsUnfold(!isUnfold)
  }
  const play = ()=>{
    dispatch(getSongDetailAction(data.id))
  }
  // const
  const picUrl = data.al && data.al.picUrl
  return (
    <PlayerWrapper>
      <div className="wrap-v2 content">
        <PlayerLeft isUnfold={isUnfold}>
          <div className="lyric">
            <div className="lyric-left">
              <img src={getSizeImage(picUrl,130)}></img>
              <span></span>
              <div className="site">
                <i className="sprite_icon2"></i>
                <a href="/">生成外链播放器</a>
              </div>
            </div>
            <div className="lyric-right">
              <div className="LR-top">
                <div className="songName">
                  <i className="sprite_icon2"></i>
                  <p>{data.name}</p>
                </div>
                <div className="author">
                  歌手: {
                     data.ar?data.ar.map((item,index)=>{
                      if(index+1 !== data.ar.length){
                        return(
                          <a href="/" key={item.id}>{item.name} / </a>
                        )
                      }else{
                        return(
                          <a href="/" key={item.id}>{item.name}</a>
                        )
                      }
                    }):''
                  }
                </div>
                <div className="author album">
                  所属专辑: <a href="/">{data.al?data.al.name:''}</a>
                </div>
                <div className="operation">
                 <div className="sprite_button play" onClick={e=>play()}><i className="sprite_button btn"></i>播放</div>
                 <div className="sprite_button addto"></div>
                 <div className="sprite_button collect"><i className="sprite_button collectIcon">收藏</i></div>
                 <div className="sprite_button collect share"><i className="sprite_button collectIcon shareIcon">分享</i></div>
                 <div className="sprite_button collect download"><i className="sprite_button collectIcon downloadIcon">下载</i></div>
                 <div className="sprite_button collect information"><i className="sprite_button collectIcon informationIcon">{getCount(musicComment.total?musicComment.total:0)}</i></div>
                </div>
              </div>
              <div className="lyric-content">
                  {
                     lyricList.map((item,index)=>{
                       if(index<10){
                        return (
                          <p key={item.time}>{item.content}</p>
                        )
                       }
                    })
                  }
                   <div className="unfold" onClick={e=>isShow()}>展开<i className="sprite_icon2"></i></div>
                    <div className="more">
                    {
                      lyricList.map((item,index)=>{
                        if(index>=10){
                         return (
                           <p key={item.time}>{item.content}</p>
                         )
                        }
                     })
                    }
                     <div className="pack-up" onClick={e=>isShow()}>收起<i className="sprite_icon2"></i></div>
                    </div>
              </div>
            </div>
          </div>
          <Comments id={data.id?data.id:1384450197}></Comments>
        </PlayerLeft>
        <PlayerRight>456</PlayerRight>
      </div>
    </PlayerWrapper>
  );
});

export default Player;